import React, { useState, useEffect } from 'react';
import './tog.scss'; // 引入样式文件

const App = () => {
    const [isDarkMode, setIsDarkMode] = useState(false);

    // 从 localStorage 加载用户的主题偏好
    useEffect(() => {
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme === 'dark') {
            setIsDarkMode(true);
        }
    }, []);

    // 切换主题并保存到 localStorage
    const toggleTheme = () => {
        setIsDarkMode(prevMode => !prevMode);
    };

    useEffect(() => {
        document.body.classList.toggle('dark-mode', isDarkMode);
        localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
    }, [isDarkMode]);

    return (
        <div>
            <button
                onClick={toggleTheme}
                className='gdbtn'
            >
                切换主题
            </button>
            <div id="theme-toggle" className={isDarkMode ? 'animate' : ''}>123</div>
        </div>

    );
};

export default App;
